<template>
	<view class="repair-wrap">
		<view class="header-clap">
			<view @click="onhome">
				<image style="width: 60rpx;height: 60rpx;" src="https://clhy-img.oss-cn-beijing.aliyuncs.com/ownerImage/homepage.png"
					></image>
			</view>
			<view class="clap-tit">随手拍</view>
		</view>
		<view class="tab_nav" style="background-color: #FFFFFF;">
			<view class="navTitle" v-for="(item,index) in navList" :key="index">
				<view :class="{'active':isActive === index}" @click="checked(index)">
					{{item.title}}
				</view>
			</view>
		</view>
		<scroll-view style="height:100vh;" scroll-y="true" @scrolltolower="onRefresh" :lower-threshold="100"
			@scroll="scroll" :scroll-top="scrolltop">
			<view>
				<view class="bor_None" v-if="followList.length == 0">
					<view class="bor_Noneone">
						<image class="bor_Noneimage" src="https://clhy-img.oss-cn-beijing.aliyuncs.com/ownerImage3/9015d0e9f45344c4007d408cd271f6a.png"
							mode=""></image>
						<view class="" style="text-align: center;color: #999;">
							<view v-if="this.isActive == 0">这我真的没有想到，你原来这么高冷，竟然没有关注任何一个人</view>
							<view v-if="this.isActive == 1">看来你们小区的物业管理服务真的挺好，不但没有报事报修，竟然连一个吐槽的都没有</view>
							<view v-if="this.isActive == 2">暂无数据</view>
							<view v-if="this.isActive == 3">整个城市都没有人发信息，绝对不可能！一定哪里出现问题，你等着我去查查！</view>
						</view>
					</view>
				</view>
				<view class="" v-else>
					<view v-for="(item,index) in followList">
						<view class="centert_box">
							<view class="u-m-t-20 repair-box  u-p-l-40 u-p-r-40" style="padding-bottom:16rpx ">
								<view>
									<view>
										<view style="margin-left: 20rpx;justify-content: space-between"
											class="left-right">
											<view class="named" style="display: flex;width: 100%;">
												<view style="display: flex;">
													<view style="position: relative;width: 40px;height: 40px;">
														<image @click="navTo('/privateMsg/clap/homepageClap',item)"
															class="avatar-icon" v-if="item.user_front_head_portrait"
															:src="item.user_front_head_portrait"></image>
														<image @click="navTo('/privateMsg/clap/homepageClap',item)"
															class="avatar-icon" v-else :src="pic">
														</image>

														<image @click="navTo('/privateMsg/clap/homepageClap',item)"
															class="avatar-icon avatar-right-icon" v-else
															src="https://clhy-img.oss-cn-beijing.aliyuncs.com/ownerImage/default-title.jpg"></image>

														<image @click="navTo('/privateMsg/clap/homepageClap',item)"
															class="avatar-icon avatar-right-icon"
															:src="item.publisher_role==1||item.publisher_role==2?
																'https://clhy-img.oss-cn-beijing.aliyuncs.com/ownerImage/owner2.png':item.publisher_role==4?
																'https://clhy-img.oss-cn-beijing.aliyuncs.com/ownerImage/1.png':'https://clhy-img.oss-cn-beijing.aliyuncs.com/ownerImage/tenant.png'">
														</image>

													</view>
													<view class="avatar-title">
														<view class="" style="margin-top: 4px;">
															<text class="avatar-name">
																{{item.user_nickname !=null ?item.user_nickname === "***"?'匿名用户':
																	  item.user_nickname.substring(0,6)+'...' : 'Vip' + item.user_id}}
															</text>
															<text class="avatar-house-name"> 【{{item.proName}}】 </text>
														</view>
														<view class="title">{{item.begin_time.substring(0,16) }}</view>
													</view>
												</view>
											</view>

											<view class="left-right-left">
												<view class="operation_box">
													<view class="matter" v-if="item.type_classification == 1">
														<image class="imagesMinx" src="https://clhy-img.oss-cn-beijing.aliyuncs.com/ownerImage3/report.png"
															mode=""></image>报事
													</view>
													<view class="matter1" v-if="item.type_classification == 2">
														<image class="imagesMinx" src="https://clhy-img.oss-cn-beijing.aliyuncs.com/ownerImage3/eport.png"
															mode=""></image>报修
													</view>
													<view class="matter2"
														v-if="item.type_classification == 3&&isActive!=2">
														<image class="imagesMinx" src="https://clhy-img.oss-cn-beijing.aliyuncs.com/ownerImage3/mood.png"
															mode="">
														</image>心情
													</view>
												</view>
											</view>
										</view>
									</view>
								</view>

								<view>
									<view style="margin-top: 10px;margin-left: 10px;">
										<view>{{item.photo_remarks}}</view>
									</view>
									<view class="img_box" v-if="item.firstPhoto != ''">
										<view :style="indexs==0?'width: 103px;height: 103px;'
														 :indexs == 1?'width: 103px;height: 103px;margin-left: 10px;'
														 :'width: 103px;height: 103px;margin-left: 10px;'" v-for="(items,indexs) in item.firstPhoto.split(',')">
											<image style="width: 100%;height: 100%;border-radius: 14rpx;"
												@click="preview(items,indexs,item.firstPhoto.split(','))" :src="items"
												mode="aspectFill"></image>
										</view>
									</view>
									<view style="margin-left: 10px;font-size: 15px;color: #999;display: flex;"
										v-if="item.type_classification != 3">
										<image class="hand-photo-postion" @click="check(item)"
											src="https://clhy-img.oss-cn-beijing.aliyuncs.com/ownerImage3/address1.png" mode=""></image>
										{{item.building_number2}}
										<view style="color: #000;">{{item.building_location}} </view>
									</view>
								</view>

								<view class="complete">

									<view v-if="item.type_classification != 3">
										<!-- 新状态：1/客服待接单。2、客服待派单。3、维接待接单。4、待维修。5、维修中。6 维修结束 -->
										<view class="u-flex" v-if="item.problem_status == 1">
											<image class="image_handle" src="https://clhy-img.oss-cn-beijing.aliyuncs.com/ownerImage/kf_pending_orders.png"
												mode="" mode=""></image>
											<view class="maintenance_status">客服待接单</view>
										</view>
										<view class="u-flex" v-if="item.problem_status == 2">
											<image class="image_handle" src="https://clhy-img.oss-cn-beijing.aliyuncs.com/ownerImage/waiting_list.png"
												mode="" mode=""></image>
											<view class="maintenance_status">客服待派单</view>
										</view>
										<view class="u-flex" v-if="item.problem_status == 3">
											<image class="image_handle" src="https://clhy-img.oss-cn-beijing.aliyuncs.com/ownerImage/wx_pending_orders.png"
												mode="" mode=""></image>
											<view class="maintenance_status">处理人待接单</view>
										</view>
										<view class="u-flex" v-if="item.problem_status == 4">
											<image class="image_handle" src="https://clhy-img.oss-cn-beijing.aliyuncs.com/ownerImage/repaired.png" mode=""
												mode=""></image>
											<view class="maintenance_status">待维修</view>
										</view>
										<view class="u-flex" v-if="item.problem_status == 5">
											<image class="image_handle" src="https://clhy-img.oss-cn-beijing.aliyuncs.com/ownerImage/maintenance.png" mode=""
												mode=""></image>
											<view class="maintenance_status">维修中</view>
										</view>
										<view class="u-flex" v-if="item.problem_status == 6">
											<image class="image_handle" src="https://clhy-img.oss-cn-beijing.aliyuncs.com/ownerImage/completed.png"></image>
											<view class="maintenance_status" style="display: flex;align-items: center;"
												@click="item.drawer=!item.drawer">
												<view class=""
													style="font-weight: 700;font-size: 15px;margin-right: 6px;">
													已完成
												</view>
												<!-- <view class="down_triangle"></view> -->
												<u-icon name="arrow-down-fill"></u-icon>
											</view>
										</view>
									</view>
								</view>

								<view style="margin-top: -30px;float: right;margin-right: 10px;width: 45%;">
									<view style="display: flex;flex-direction:row-reverse;margin-top: 4px;">
										<view style="display: flex;justify-content: space-between;">
											<view style="display: flex;align-items: center;margin-right:10px;"
												@click="navTo2('/privateMsg/clap/floowData',item)">
												<view class="pinglun_box" style="position: relative;">
													<image style="width: 20px;height: 20px;"
														src="https://clhy-img.oss-cn-beijing.aliyuncs.com/ownerImage3/comment.png" mode=""></image>
												</view>
												<view class="like_reply">
													{{item.comment_count}}
												</view>
											</view>
											<view style="display: flex;align-items: center;margin-right:10px" @click="listBtn(item)">
												<view class="pinglun_box" style="position: relative;">
													<image style="width: 20px;height: 20px;"
														:src="item.sfClick==true?'https://clhy-img.oss-cn-beijing.aliyuncs.com/ownerImage3/giewa.png':'https://clhy-img.oss-cn-beijing.aliyuncs.com/ownerImage3/givethe.png'"
														mode="">
													</image>
												</view>
												<view class="like_reply">{{item.click_fabulous_count}}</view>
											</view>
										</view>
										<view @click="deteleClaplist(item)" v-if="item.user_id==userId" style="margin-right: 10px;">
											<image style="width: 19px;height: 18px;margin-top: -1px;"
												src="https://clhy-img.oss-cn-beijing.aliyuncs.com/ownerImage/delete (2).png" mode=""></image>
										</view>
									</view>
								</view>
								<view v-if="item.drawer" style="margin-top: 15px;">
									<view style="margin-top: 10px;" v-if="item.recordCdo.take_orders_name != null">
										<text style="color: #999;">处理人：</text>
										{{item.recordCdo.employee_org_dept_name}}-{{item.recordCdo.employee_org_post_name}}-{{item.recordCdo.take_orders_name}}
									</view>

									<view style="color: #999;margin-top: 10px;" v-if="item.problem_status == 6">
										处理时间：
										<text style="color: #000;" v-if="item.recordCdo.start_time!=null">
											{{item.recordCdo.start_time.substr(0,16)}}
											<text v-if="item.recordCdo.complete_time!=null">
												至{{
														item.recordCdo.start_time.substr(0,10) == item.recordCdo.complete_time.substr(0,10)?item.recordCdo.complete_time.substr(11,5):
														item.recordCdo.start_time.substr(0,4)  == item.recordCdo.complete_time.substr(0,4) ?item.recordCdo.complete_time.substr(5,11):
														item.recordCdo.complete_time.substr(0,16)
													}}
											</text>
										</text>
									</view>

									<view v-if="item.problem_status == 6 "
										style="color: #000000;margin-top: 10px;margin-left: 10px;">
										{{item.recordCdo.complete_content}}
									</view>

									<view v-if="item.recordCdo.complete_image != null">
										<view style="display: flex;margin-top: 5px;"
											v-if="item.recordCdo.complete_image != null">
											<view style="width: 103px;height: 103px;margin-left: 10px;"
												v-for="(item2,index2) in item.recordCdo.complete_image.split(',')">
												<image style="width: 100%;height: 100%;border-radius: 12rpx;"
													@click="preview(item2,index2,item.recordCdo.complete_image.split(','))"
													:src="item2" mode=""></image>
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="isPageText" style="color:#999;">{{loading?'上滑加载更多':'—— 我也是有底线的 ——'}}</view>
				</view>
			</view>

			<view class="addFlex">
				<image class="image1" @click="tomodel" src="https://clhy-img.oss-cn-beijing.aliyuncs.com/ownerImage/tenAddDatas.png"></image>
			</view>
		</scroll-view>
		<!-- 弹窗 -->
		<view class="modal" v-if="deletepop">
			<view class="modal-cont">
				<view class="modal-title">提示</view>
				<view style="display: flex;margin-top: 20px;">
					<view><span>是否删除随手拍</span></view>
				</view>

				<view class="modal-bottom">
					<view class="btn-cancel" @click="deletepop = false">取消</view>
					<view class="btn-sure" @click="getDelete()">确定删除</view>
				</view>
			</view>
		</view>

		<view class="modal" v-if="consultMap">
			<view class="modal-cont">
				<view class="modal-title" style="margin-top: 18px;">
					地图定位
				</view>
				<map style="width: 100%; height: 400px;" :latitude="latitude" :longitude="longitude"
					:markers="mapCenter"></map>
				<view class="modal-bottom">
					<view class="btn-cancel1" @click="consultMap = false">关闭</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				pic: 'https://clhy-img.oss-cn-beijing.aliyuncs.com/logo/avatar.jpg',
				type: 1,
				index: 0,
				array: ['分类', '分类二'],
				buttonClick: 0,
				buttonDay: 0,
				isActive: 2, //0.拍一拍   1.社会动态    2.我的拍一拍
				inday: 0,
				navList: [{
						index: 0,
						title: '关注'
					},
					{
						index: 1,
						title: '本小区'
					}, {
						index: 2,
						title: "全部"
					}, {
						index: 3,
						title: "同城"
					}
				],
				ruleForm: {
					renType: null,
				},
				indexList: true,
				pageIndex: 1,
				pageSize: 10,
				clapListData: [], //获取小区
				myCount: 0,
				statu: 1, //1、关注   2、已关注
				followList: [], //获取关注列表
				clapListDatatow: [], //获取全部
				userSex: null,
				covers: [{
					id: 1,
					width: 100,
					height: 100,
					latitude: 39.909,
					longitude: 116.39742,
					iconPath: 'https://clhy-img.oss-cn-beijing.aliyuncs.com/ownerImage2/tbdw.png'
				}],
				clapListCity: [],
				loading: false,
				// type: 1,
				nextPage: false,
				listData: [],
				deletepop: false, //删除弹窗
				user_id: null,
				total: null, //总条数

				consultMap: false,
				mapCenter: [{
					id: 1,
					width: 100,
					height: 100,
					latitude: 39.909,
					longitude: 116.39742,
					iconPath: 'https://clhy-img.oss-cn-beijing.aliyuncs.com/ownerImage2/tbdw.pngg'
				}],
				latitude: 39.909,
				longitude: 116.39742,
				backtop: false,
				scrolltop: 0.1,
				oldscrolltop: 0,
				userId:uni.getStorageSync('rawData').userId
			}
		},
		mounted() {
			//默认为 wgs84 返回 gps 坐标，gcj02 返回国测局坐标
			uni.getLocation({
				type: 'gcj02',
				success: (res) => {
					console.log('当前位置的经度：' + res.longitude);
					console.log('当前位置的纬度：' + res.latitude);
					this.latitude = res.latitude;
					this.longitude = res.longitude;
					this.covers[0].latitude = res.latitude;
					this.covers[0].longitude = res.longitude;
				}
			});

		},
		onShow() {
			this.user_id = uni.getStorageSync('rawData').userId;
			this.checkLogin();
		},
		onPullDownRefresh() {
			this.getfllowList()
		},
		
		methods: {
			//图标跳转
			onhome() {
				let user = {
					user_id: this.homelist.ownerUserId
				}
			
				let items = encodeURIComponent(JSON.stringify(user))
				uni.navigateTo({
					url: "/privateMsg/clap/homepageClap?item=" + items
				});
			},
			scroll(e) {
				this.oldscrolltop = e.detail.scrollTop
				// console.log("this.oldscrolltop", this.oldscrolltop);
			},
			scrolltolower() {
				console.log("触底刷新事件");
				this.pageIndex = this.pageIndex + 1;
				this.getRepaireClass();

			},
			//查看地图定位按钮
			check(val) {
				this.mapCenter[0].latitude = val.latitude;
				this.mapCenter[0].longitude = val.longitude;
				this.longitude = val.longitude, // 回显位置的纬度
					this.latitude = val.latitude, // 回显位置的经度
					this.consultMap = true;
			},

			checkLogin() {
				let _this = this
				if (uni.getStorageSync('phone')) {
					if (uni.getStorageSync('loginFlag')) {
						if (!uni.getStorageSync('hourseList')) {
							uni.showModal({
								title: '请先进行业主认证',
								showCancel: false,
								confirmText: '确认',
								confirmColor: '#F9A832',
								success: function(res) {
									if (res.confirm) {
										_this.$Router.push({
											path: '/my/address/address'
										})
									}
								}
							});
							this.$openInvite()
						} else {
							_this.showFlag = true
							_this.homelist = uni.getStorageSync('hourseList')[uni.getStorageSync('hourseNum') || 0]
							_this.name = _this.homelist.proName;
							_this.address = _this.homelist.buildDistrictCode + '-' + _this.homelist.buildTowerCode + '-' +
								_this.homelist.roomUnitNumber + '-' + _this.homelist.roomCode
							_this.getfllowList()

							// this.getclapList()
							this.homelist = uni.getStorageSync('hourseList')[uni.getStorageSync('hourseNum') || 0]
							console.log(this.homelist)
							this.user_id = uni.getStorageSync('rawData').userId;
						}
					} else {
						uni.showModal({
							title: '请先实名认证',
							showCancel: false,
							confirmText: '确认',
							confirmColor: '#F9A832',
							success: function(res) {
								if (res.confirm) {
									_this.$Router.push({
										path: '/homePage1/realName/realName'
									})
								}
							}
						});
					}
				} else {
					uni.showModal({
						title: '请先登录',
						showCancel: false,
						confirmText: '确认',
						confirmColor: '#F9A832',
						success: function(res) {
							if (res.confirm) {
								console.log('a')
								_this.$Router.pushTab({
									path: '/pages/user/user'
								})
							}
						}
					});
				}
			},
			//点击图片放大
			imageBig(url) {
				uni.previewImage({
					urls: [url], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
				})
			},
			goMap() {
				uni.navigateTo({
					url: '/privateMsg/clap/resLIst'
				})
			},
			//删除随手拍
			deteleClaplist(val) {
				this.deletepop = true
				this.deleteData = val
				console.log(this.deleteData)
			},
			getDelete() {
				if (this.homelist.ownerUserId != this.deleteData.user_id) {
					uni.showToast({
						title: '您只能删除自己发表的信息！',
						icon: 'error'
					});
					this.deletepop = false
					return
				}
				this.$request.api.deleteClapList({
					id: this.deleteData.id
				}).then(res => {
					if (res.data.code == 0) {
						uni.showToast({
							title: '删除成功',
							icon: 'success'
						});
						this.deletepop = false
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'error'
						});
					}
					this.getfllowList()
				})
			},
			//取消关注
			fllowBtnone(val) {
				this.$request.api.followList({
					focus_on_people_id: this.homelist.ownerUserId, //关注人id
					people_concerned_id: val.focus_on_people_id, //被关注人id
				}).then(res => {
					this.getfllowList()
				})
			},

			//刷新下拉
			onRefresh() {
				console.log("触底了");
				console.log("this.nextPage", this.nextPage);
				if (!this.nextPage) {
					this.pageIndex = this.pageIndex + 1;
					this.getfllowList();
				}
			},
			//关注列表
			async getfllowList() {
				console.log(this.pageIndex, 'pageindex')
				// if (this.pageIndex < 2) {
				uni.showLoading({
					title: '加载中'
				});
				// }
				this.$request.api.clapList({
					pageIndex: this.pageIndex,
					selectUserId: this.homelist.ownerUserId, //操作人id
					myConcern: this.isActive == 0 ? 1 : null,
					project_id: this.isActive == 1 ? this.homelist.proId : null,

					longitude: this.isActive == 3 ? this.covers[0].longitude : null,
					latitude: this.isActive == 3 ? this.covers[0].latitude : null
				}).then(res => {
					// console.log(res)
					if (this.pageIndex == 1) {
						this.followList = res.data.data.datalist || [];
					} else {
						this.followList = [...this.followList, ...res.data.data.datalist];
					}
					this.total = res.data.data.totalNumber
					console.log(this.total)
					if (res.data.data.datalist.length > 0) {
						this.nextPage = false;
					} else {
						this.nextPage = true;
					}
					if (this.pageIndex * 10 >= res.data.data.totalNumber) {
						this.loading = false
					} else {
						this.loading = true
					}
					uni.hideLoading();
				})
				uni.stopPullDownRefresh()
			},
			//关注
			fllowBtn(item) {
				this.$request.api.followList({
					focus_on_people_id: this.homelist.ownerUserId, //关注人id
					people_concerned_id: item.user_id, //被关注人id
				}).then(res => {})

			},
			//点赞
			listBtn(item) {
				if (item.sfClick == true) {
					item.sfClick = false;
					item.click_fabulous_count = item.click_fabulous_count - 1
				} else {
					item.sfClick = true
					item.click_fabulous_count = item.click_fabulous_count + 1
				}
				this.$request.api.givethumbs({
					user_id: this.homelist.ownerUserId,
					type: 1, //点赞状态:1、随手拍，2、评论
					id: item.id, //随手拍或评论id
				}).then(res => {})

			},
			// 图片预览
			preview(item, indexs, imgarrs) {
				console.log('item1', item, 'indexs2', indexs, ' imgarrs3', imgarrs)
				var imgarr = []
				for (let i = 0; i < imgarrs.length; i++) {
					imgarr.push(imgarrs[i])
				}
				console.log('imgarr', imgarr)
				uni.previewImage({
					urls: imgarr,
					current: indexs,
				});
			},

			natov(url) {
				uni.navigateTo({
					url: url
				})
			},
			checked(index) {
				// 自定义语句
				if (index == 0) {
					this.noDatatext = this.noDatahint0
				} else if (index == 1) {
					this.noDatatext = this.noDatahint1
				} else if (index == 2) {
					this.noDatatext = this.noDatahint2
				} else if (index == 4) {
					this.noDatatext = this.noDatahint3
				}
				this.scrolltop = this.oldscrolltop
				this.$nextTick(() => {
					this.scrolltop = 0
				});
				this.isActive = index
				this.pageIndex = 1;
				this.followList = []
				this.getfllowList()
			},
			navTo(url, item) {
				if (item.privacy_classification != 1) {
					return
				}
				let items = encodeURIComponent(JSON.stringify(item))
				uni.navigateTo({
					url: url + '?item=' + items
				});
			},
			navTo2(url, item) {
				let items = encodeURIComponent(JSON.stringify(item))
				uni.navigateTo({
					url: url + '?item=' + items
				});
			},
			tomodel() {
				uni.navigateTo({
					url: '/privateMsg/clap/resLIst'
				})
			},
		}
	}
</script>


<style lang="scss">
	.isPageText {
		text-align: center;
	}

	.content {
		text-align: center;
	}

	.img_sex {
		width: 20px;
		height: 20px;
		position: absolute;
		// top: 85px;
		left: 32px;
		top: -5px;
		z-index: 1;
	}

	.repair-wrap {
		width: 100%;
		min-height: 80vh;
		height: auto;
		background: #f4f4f4;
		overflow: hidden;
		.header-clap{
			display: flex;
			align-items: center;
			margin: 72rpx 0 40rpx 20rpx;
			.clap-tit{
				text-align: center;
				margin-left: 246rpx;
			}
		}
		.repair-box {
			background: #fff;

			.repair-titel {
				height: 44rpx;
				line-height: 44rpx;

				.repair-titel-l {
					float: left;
				}

				.repair-titel-r {
					float: right;
					color: #999;
				}
			}

			.repair-6 {
				color: #666;
			}
		}
	}

	.tab_nav {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 80rpx;
		line-height: 80rpx;
	}

	.tab_nav .navTitle {
		height: 80rpx;
		line-height: 80rpx;
		width: 100%;
		text-align: center;
		font-size: 32rpx;
		font-family: Alibaba PuHuiTi;
		color: #333;
	}

	.active {
		position: relative;
		color: #447A05;
	}

	.active::after {
		content: "";
		position: absolute;
		width: 100rpx;
		height: 5rpx;
		background-color: #447A05;
		left: 0px;
		right: 0px;
		bottom: 0px;
		margin: auto;
	}

	.list-img {
		width: 45px;
		height: 45px;
		position: relative;
		// border-radius: 50%;
	}

	.named {
		display: flex;
		font-size: 30rpx;
		color: #333333;
		line-height: 40rpx;
	}

	.left-right {
		display: flex;
	}

	.left-right-left {
		display: flex;
		margin-top: 10rpx;
		flex-wrap: wrap;
		justify-content: flex-end;
		width: 90px;
	}

	.avatar-icon {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.avatar-right-icon {
		width: 16px;
		height: 16px;
		position: absolute;
		top: 24px;
		right: -6px;
	}

	.avatar-title {
		margin-left: 8px;
	}

	.avatar-name {
		font-weight: bold;
	}

	.avatar-house-name {
		font-size: 12px;
		margin-left: 8rpx;
		color: #399300;
	}

	.title {
		font-size: 26rpx;
		color: #999999;
		width: 250rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.follow {
		height: 26px;
		line-height: 25px;
		text-align: center;
		padding: 0px 15px;
		border-radius: 16px;
		font-size: 11px;
		border: 1px solid #ffffff;
		float: right;
		background: linear-gradient(to bottom, #c3e69b99, #00aa008f);
	}

	.complete {
		padding: 0 20rpx;
		display: flex;
		text-align: center;
		font-size: 26rpx;
		height: 74rpx;
		background: #eeeeee80;
		padding: 20rpx;
		margin-top: 10rpx;
		border-radius: 14rpx;

		.maintenance_status {
			font-weight: 600;
			margin-top: 1px;

			.down_triangle {
				width: 0;
				height: 0;
				border-left: 16rpx solid transparent;
				border-right: 16rpx solid transparent;
				border-top: 16rpx solid #999;
				margin: 2rpx 16rpx;
			}
		}
	}

	.complete_chu {
		background-color: rgba(249, 168, 50, 0.2);
		line-height: 56rpx;
		border-radius: 54rpx;
		position: relative;
	}
	.complete_chu1 {
		height: 60rpx;
		background-color: rgba(69, 124, 5, 0.1);
		margin: 30rpx 10rpx;
		line-height: 60rpx;
		border-radius: 54rpx;
		position: relative;
	}

	.complete_chuImg {
		width: 30rpx;
		height: 30rpx;
	}

	.complete_chuTxt {
		margin-left: 35rpx;
	}

	.complete_yi {
		width: 180rpx;
		height: 80rpx;
		background-color: #33F9A832;
		margin: 30rpx 10rpx;
		line-height: 80rpx;
		border-radius: 54rpx;
		position: relative;
	}

	.complete_chuImg {
		width: 30rpx;
		height: 30rpx;
		margin-top: 8px;
	}

	.complete_chuTxt {
		margin-left: 6px;
	}

	.complete_dian {
		margin-left: 160rpx;
		line-height: 140rpx;
		color: #999;
		letter-spacing: 3rpx;
	}

	.modal {
		position: fixed;
		top: 0%;
		left: 0%;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.8);
		z-index: 10;
	}

	.modal-cont {
		width: 610rpx;
		// min-height: 420rpx;
		background: #ffffff;
		box-shadow: 0rpx 6rpx 12rpx 0rpx rgba(0, 0, 0, 0.12);
		border-radius: 24rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.modal-icon {
		width: 80rpx;
		height: 80rpx;
		margin-top: 67rpx;
	}

	.modal-title {
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 600;
		color: #333333;
		line-height: 45rpx;
		margin-top: 22rpx;
		align-items: center;
		border-bottom: 1px solid #ddd;
		padding: 0px 20px 10px;
		text-align: center;
		width: 89%;
		margin: auto;
	}

	.modal-content {
		width: 443rpx;
		// height: 88rpx;
		font-size: 28rpx;
		text-align: center;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		line-height: 44rpx;
		margin-top: 24rpx;
	}

	.text-area {
		margin-top: 24rpx;
		width: 520rpx;
		padding: 10rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		line-height: 44rpx;
		max-height: 105rpx;
		border: 1rpx solid #f0f0f0;
		border-radius: 8rpx;
	}

	.modal-bottom {
		width: 100%;
		height: 84rpx;
		border-top: 1rpx solid #e6e9ed;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 50rpx;
	}

	.btn-cancel {
		width: 50%;
		height: 84rpx;
		text-align: center;
		line-height: 84rpx;
		border-right: 1rpx solid #d8d8d8;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		box-sizing: border-box;
	}

	.btn-cancel1 {
		width: 100%;
		height: 84rpx;
		text-align: center;
		line-height: 84rpx;
		/* border-right: 1rpx solid #d8d8d8; */
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		box-sizing: border-box;
	}

	.btn-sure {
		width: 50%;
		height: 84rpx;
		text-align: center;
		line-height: 84rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #578ef0;
	}

	.img_box {
		margin-top: 10rpx;
		display: flex;
		padding: 10px;

		.imgIndec {
			width: 110px;
			height: 100px;

			.image {
				width: 100%;
				height: 100%;
			}
		}

	}

	.map {
		width: 120rpx;
		height: 72rpx;
		background: #fff;
		border-radius: 24rpx;
		line-height: 72rpx;
		text-align: center;
	}

	.bor_None {
		.bor_Noneone {
			width: 232px;
			height: 242px;
			margin: 110px auto;

			.bor_Noneimage {
				width: 100%;
				height: 100%;
			}
		}

		.bor_Nonetext {
			width: 62%;
			margin: -66px auto;
			text-align: center;
			color: #999;
		}

	}

	.centert_box {
		border-top: 1px solid #F7F8F9;
		background-color: #FFFFFF;
		margin-top: 10px;
	}

	.operation_box {
		.matter {
			border: 1px solid #EBF9FF;
			background: #EBF9FF;
			color: #11A9EC;
			border-radius: 5px;
			padding: 3px 10px 5px;
			display: flex;
			align-items: center;
		}

		.matter1 {
			border: 1px solid #FFF5E7;
			background: #FFF5E7;
			color: #F9A832;
			border-radius: 5px;
			padding: 3px 10px 5px;
			display: flex;
			align-items: center;
		}

		.matter2 {
			border: 1px solid #EDFFED;
			background: #EDFFED;
			color: #63B604;
			border-radius: 5px;
			padding: 3px 10px 5px;
			display: flex;
			align-items: center;
		}

		.imagesMinx {
			width: 13px;
			height: 13px;
			margin-right: 4px;
			top: -1px;
			vertical-align: bottom;
			display: flex;
			align-items: center;
		}
	}

	.hand-photo-postion {
		width: 10px;
		height: 13px;
		margin-right: 5px;
		top: 2px;
	}

	.addFlex {
		position: fixed;
		bottom: 300rpx;
		right: 45rpx;
		height: 84rpx;
		width: 84rpx;
	}

	.image1 {
		width: 100%;
		height: 100%;
	}

	.image_handle {
		width: 18px;
		height: 18px;
		padding-right: 10rpx;
	}

	.like_reply {
		margin-left: 8px;
		font-size: 16px;
		margin-top: -7px;
	}
</style>